<template>
  <div class="contract-test">
    <h2>合同API测试页面</h2>
    
    <div class="test-section">
      <h3>1. 测试合同类型列表</h3>
      <el-button @click="testContractTypeList" type="primary">获取合同类型列表</el-button>
      <div v-if="contractTypeResult" class="result">
        <pre>{{ JSON.stringify(contractTypeResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>2. 测试合同状态列表</h3>
      <el-button @click="testContractStatusList" type="primary">获取合同状态列表</el-button>
      <div v-if="contractStatusResult" class="result">
        <pre>{{ JSON.stringify(contractStatusResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>3. 测试合同分页查询</h3>
      <el-button @click="testContractPage" type="primary">获取合同分页数据</el-button>
      <div v-if="contractPageResult" class="result">
        <pre>{{ JSON.stringify(contractPageResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>4. 测试新增合同</h3>
      <el-button @click="testAddContract" type="success">测试新增合同</el-button>
      <div v-if="addContractResult" class="result">
        <pre>{{ JSON.stringify(addContractResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>5. 网络请求状态</h3>
      <div class="status">
        <p>当前状态: {{ currentStatus }}</p>
        <p>错误信息: {{ errorMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { contractApi } from '@/api/contract/contract'
import { ElMessage } from 'element-plus'

export default {
  name: 'ContractTest',
  data() {
    return {
      contractTypeResult: null,
      contractStatusResult: null,
      contractPageResult: null,
      addContractResult: null,
      currentStatus: '就绪',
      errorMessage: ''
    }
  },
  methods: {
    async testContractTypeList() {
      this.currentStatus = '正在获取合同类型列表...'
      this.errorMessage = ''
      try {
        const res = await contractApi.getContractTypeList()
        this.contractTypeResult = res
        this.currentStatus = '获取合同类型列表成功'
        ElMessage.success('获取合同类型列表成功')
      } catch (error) {
        this.errorMessage = error.message || '未知错误'
        this.currentStatus = '获取合同类型列表失败'
        ElMessage.error('获取合同类型列表失败: ' + this.errorMessage)
        console.error('获取合同类型列表失败:', error)
      }
    },

    async testContractStatusList() {
      this.currentStatus = '正在获取合同状态列表...'
      this.errorMessage = ''
      try {
        const res = await contractApi.getContractStatusList()
        this.contractStatusResult = res
        this.currentStatus = '获取合同状态列表成功'
        ElMessage.success('获取合同状态列表成功')
      } catch (error) {
        this.errorMessage = error.message || '未知错误'
        this.currentStatus = '获取合同状态列表失败'
        ElMessage.error('获取合同状态列表失败: ' + this.errorMessage)
        console.error('获取合同状态列表失败:', error)
      }
    },

    async testContractPage() {
      this.currentStatus = '正在获取合同分页数据...'
      this.errorMessage = ''
      try {
        const params = {
          current: 1,
          size: 10,
          status: 0
        }
        const res = await contractApi.getContractPage(params)
        this.contractPageResult = res
        this.currentStatus = '获取合同分页数据成功'
        ElMessage.success('获取合同分页数据成功')
      } catch (error) {
        this.errorMessage = error.message || '未知错误'
        this.currentStatus = '获取合同分页数据失败'
        ElMessage.error('获取合同分页数据失败: ' + this.errorMessage)
        console.error('获取合同分页数据失败:', error)
      }
    },

    async testAddContract() {
      this.currentStatus = '正在测试新增合同...'
      this.errorMessage = ''
      try {
        const testData = {
          contractName: '测试合同' + Date.now(),
          contractType: 'SALE',
          signedDate: new Date().toISOString().split('T')[0],
          startDate: new Date().toISOString().split('T')[0],
          endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
          totalAmount: 10000,
          remark: '这是一个测试合同'
        }
        const res = await contractApi.addContract(testData)
        this.addContractResult = res
        this.currentStatus = '测试新增合同成功'
        ElMessage.success('测试新增合同成功')
      } catch (error) {
        this.errorMessage = error.message || '未知错误'
        this.currentStatus = '测试新增合同失败'
        ElMessage.error('测试新增合同失败: ' + this.errorMessage)
        console.error('测试新增合同失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.contract-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.test-section h3 {
  margin-top: 0;
  color: #333;
}

.result {
  margin-top: 15px;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.result pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
  color: #333;
}

.status {
  background: #f0f9ff;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #bae6fd;
}

.status p {
  margin: 5px 0;
  color: #0369a1;
}
</style>
